<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体样式</title>
    <style>
        /* class 选择器 */
        .primary_header
        {
            color: orange;
        }

        /* id 选择器 */
        #welcome
        {
            background: #f4f4f4;
        }

        /* 多选择器 */
        #welcome #about
        {
            border: 1px solid #cccccc;
            padding: 10px;
            margin-bottom: 10px;
        }

        /* 嵌套选择器 */
        #welcome p 
        {
            font-size: 20px;
        }

        body
        {
            /* background: rgba(40, 139, 163,0.3); */
            background: #beebee;
            font-family: 'Times New Roman', Times, serif;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="welcome">
        <h2 class="primary_header">
            Ltt
        </h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda accusantium, distinctio ex numquam magnam harum optio sapiente natus adipisci unde iure rerum inventore voluptatum maiores molestias cum! Iure, quidem officiis?
        </p>
    </div>

    <div id="about">
        <h2 style="font-family: 楷体">
            关于
        </h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo necessitatibus quia deserunt. Corrupti eligendi cupiditate soluta neque similique voluptas adipisci?
        </p>
    </div>
</body>
</html>